<template>
    <view class="optionMain">
        <view class="tabLayout" :class="curIndex == 0?'tabBg1':curIndex == 1?'tabBg2':'tabBg3'">
            <view class="tabItem" v-for="(item, index) in tabList" :key="index" @click="onTabItemClick(item,index)">
                <view class="title">{{ item.title }}</view>
                <view>
                    <text class="value">{{ item.value }}</text>
                    <text class="unit" v-if="index == 3">km</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import {ref} from "vue";

let props = defineProps(["tabList"]);
let emits = defineEmits(["tabClick"]);
let curIndex = ref(0)

function onTabItemClick(item: any, index: any) {
    if (index != 3) {
        curIndex.value = index
    }
    emits("tabClick", {item, index})
}

</script>

<style scoped lang="scss">
.optionMain {
    width: 100%;
    box-sizing: border-box;
}

.tabLayout {
    width: 100%;
    height: 100%;
    //background: linear-gradient(272deg, #FE3030 0%, #FD7E7E 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-radius: 10rpx;
    padding: 40rpx 20rpx 40rpx;

}

.tabBg1 {
    background-image: url("../../static/images/pulice/os_tab_bg1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.tabBg2 {
    background-image: url("../../static/images/pulice/os_tab_bg2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.tabBg3 {
    background-image: url("../../static/images/pulice/os_tab_bg3.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.tabItem {
    flex: 1;
    position: relative;
}

.title {
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    margin-bottom: 10rpx;
}

.value {
    font-weight: bold;
    font-size: 50rpx;
    color: #FFFFFF;
}

.unit {
    font-weight: 400;
    font-size: 30rpx;
    color: #FFFFFF;
    margin-left: 5rpx;
}

</style>